<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">搜索</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg05.png')" mode="widthFix"></image>
			<view class="bg_content">
				<view class="nav">
					<view class="navauto">
						<block v-for="(item, index) in menu" :key="index">
							<view class="menu" :data-index="index" @tap="setNavMenu">
								<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}</view>
								<view class="line" :class="index == select ? 'menucolor02' : ''">
									<image src="../../static/xiao.png" mode="widthFix"></image>
								</view>
							</view>
						</block>
					</view>
				</view>
				
				<!-- <scroll-view class="scroll_box" scroll-y="true" @scrolltolower="lower"> -->
					<view v-if="select == 0">
						<sl-filter :independence="true" ori="index" :pickerText="pickerText" :color="titleColor"
							:themeColor="themeColor" :menuList.sync="menuList" @reset="do_reset" @result="result" @result_2="result_2"></sl-filter>
						<view class="records_maxbox" v-if="pickerText != '地区' || searchs.price_str || screen_data[1].value || screen_data[2].value || screen_data[3].value || screen_data[4].value">
							<view class="records_box">
								<view class="records" v-if="pickerText != '地区'">
									<view class="text">{{pickerText}}</view>
									<view class="close iconfont icon-guanbi" data-index="0" @tap="closeRecordsIndex"></view>
								</view>
								<block v-if="!screen_data[1].value">
									<view class="records" v-if="searchs.price_str">
										<view class="text">价格:{{searchs.price_str}}</view>
										<view class="close iconfont icon-guanbi" data-index="1" @tap="closeRecordsIndex"></view>
									</view>
								</block>
								<view class="records" v-if="screen_data[1].value">
									<view class="text">价格:{{screen_data[1].value}}万</view>
									<view class="close iconfont icon-guanbi" data-index="1" @tap="closeRecordsIndex"></view>
								</view>
								<view class="records" v-if="screen_data[2].value">
									<view class="text">车龄:{{screen_data[2].value}}</view>
									<view class="close iconfont icon-guanbi" data-index="2" @tap="closeRecordsIndex"></view>
								</view>
								<view class="records" v-if="screen_data[3].value">
									<view class="text">排量:{{screen_data[3].value}}L</view>
									<view class="close iconfont icon-guanbi" data-index="3" @tap="closeRecordsIndex"></view>
								</view>
								<view class="records" v-if="screen_data[4].value">
									<view class="text">里程{{screen_data[4].value}}</view>
									<view class="close iconfont icon-guanbi" data-index="4" @tap="closeRecordsIndex"></view>
								</view>
							</view>
							<view class="clear" @tap="clearRecords" v-if="codename != '品牌' || searchs.price_str || screen_data[1].value || screen_data[2].value || screen_data[3].value || screen_data[4].value">清除</view>
						</view>
						<block v-for="(item,index) in info">
							<view class="goods_list" :data-url="'/pages/goods/goods?id='+item.id" @click="gotopage">
								<view class="goods_img">
									<view class="type" v-if="item.status==2">已下架</view>
									<image :class="item.status==2 ? 'imgColor' : ''" :src="item.logo" mode="scaleToFill" @tap.stop="openPreviewImage(item.thumb,0)"></image>
								</view>
								<view class="goods_text">
									<view class="title">{{item.title}}</view>
									<view class="text">{{item.year}}年 / {{item.mileage}}万公里 / {{item.city}}</view>
									<view class="money_box">
										<view class="money" >{{item.show_price}}万</view>
										<view class="rule" >更新日期：{{item.updated_at}}</view>
										<!-- <view class="money" v-if="is_vip == 0">*万</view>
										<view class="rule" >批发价 {{item.member_price}}万</view> -->
										<!-- <view class="rule" v-if="is_vip == 0">批发价 *万</view> -->
									</view>
								</view>
							</view>
						</block>
					</view>
					<view v-if="select == 1">
						<block v-for="(item,index) in info">
							<view class="circle_list">
								<view class="circle_box">
									<view class="circle_img">
										<image :src="item.headimg" mode="scaleToFill"></image>
									</view>
									<view class="circle_text">
										<view class="name">{{item.nickname}}</view>
										<view class="text" v-if="item.auto_num > 0">近一个月同步朋友圈车源<span>{{item.auto_num}}</span>条</view>
									</view>
									<view class="orientation">{{item.city}}</view>
								</view>
								<view class="circle_value">
									<!-- <view class="type">置顶</view> -->
									<view class="value" v-bind:selectable="true" @longpress="onLongPress(item.content)">{{item.content}}</view>
								</view>
								<view class="circle_picture" v-if="item.thumb.length > 1">
									<block v-for="(item_0,index_0) in item.thumb" :key="index">
										<view class="picture" v-if="index_0 < 2">
											<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
										</view>
										<view class="picture_2" v-if="index_0 == 2 && item.thumb.length > 3">
											<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
											<text class="count">+{{ item.thumb.length - 3 }}</text>
										</view>	
										<view class="picture" v-if="index_0 == 2 && item.thumb.length <= 3">
											<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
										</view>	
									</block>
								</view>
								<view class="circle_picture" v-if="item.thumb.length < 2" :style="{ width: '30% !important'}">
									<block v-for="(item_0,index_0) in item.thumb" :key="index">
										<view class="picture">
											<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
										</view>
									</block>
								</view>
								<view class="circle_other">
									<view class="time">{{item.time}}</view>
									<view class="icon_box">
										<view class="icon" @tap="collect(index)">
											<view class="i iconfont icon-shoucang" v-if="item.collect_s == 0"></view>
											<view class="c iconfont icon-shoucang" v-if="item.collect_s > 0"></view>
											<view class="t">收藏</view>
										</view>
										<view class="icon" @tap="contact(item.contact_info)">
											<view class="i iconfont icon-dianhua"></view>
											<view class="t">电话</view>
										</view>
										<view class="icon" @tap="getAllUrl(item.thumb)">
											<view class="i iconfont icon-xiazai"></view>
											<view class="t">下载</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<block v-if="empty_show">
						<view style="height: 10vh;margin-top: 20vw;width: 100%;text-align: center;" >
							<u-empty text="没有更多了" mode="list">没有更多了</u-empty>
						</view>
					</block>
				<!-- </scroll-view> -->
				
			</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"themeColor="#333"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import slFilter from '@/components/sl-filter/sl-filter_2.vue';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				select:0,
				menu: [
					{
						text: '秒杀车源'
					},
					{
						text: '朋友圈车源'
					},
				],
				keyword:'',
				is_vip:0,
				empty_show:0,
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '地区',
				themeColor: '#FC5D20',
				titleColor: '#1E2128',
				filterResult: '',
				menuList: [{
						'title': '排序',
						'icon': '1',
						'key': 'sort',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'type': '1',
						'detailList': [{
								'title': '排序',
								'value': ''
							},
							{
								'title': '最新上架',
								'value': '最新上架'
							},
							{
								'title': '里程最少',
								'value': '里程最少'
							},
							{
								'title': '价格最低',
								'value': '价格最低'
							},
							{
								'title': '价格最高',
								'value': '价格最高'
							},
							{
								'title': '车龄最短',
								'value': '车龄最短'
							}
						]
					},
					{
						'title': '地区',
						'key': 'single',
						'isMutiple': false,
						'detailTitle': '请选择',
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'type': '2',
						'detailList': [{
								'title': '地区',
								'value': 0
							},
				
						]
					},
					{
						'title': '价格',
						'key': 'salary',
						'isMutiple': false,
						'type': '3',
						'detailList': [{
								'title': '不限',
								'value': ''
							},
							{
								'title': '0~3万',
								'value': '0~30000'
							},
							{
								'title': '3万~10万',
								'value': '30000~100000'
							},
							{
								'title': '10万~15万',
								'value': '100000~150000'
							},
							{
								'title': '15万~25万',
								'value': '150000~250000'
							},
							{
								'title': '25万~35万',
								'value': '250000~350000'
							},
							{
								'title': '35万~50万',
								'value': '350000~500000'
							},
							{
								'title': '50万以上',
								'value': '500000~5000000'
							}
						]
				
					},
					{
						'title': '筛选',
						'key': 'single',
						'isMutiple': false,
						'detailTitle': '请选择（筛选）',
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'type': '4',
						'detailList': [{
							'title': '筛选',
							'value': ''
						}, ]
				
					},
				
				],
				searchs: {
					brand_id: 0,
					price_str: '',
					defaul_sort: '',
					ctype_id: 0,
				},
				prov: '',
				city: '',
				area: '',
				screen_data: [],
			}
		},
		onLoad(e) {
			let that = this;
			that.keyword = e.keyword;
			that.loadData();
			uni.$on('index_screen', (data) => {
				this.screen_data = data;
				console.log(data);
				this.page = 1;
				this.pageinit();
			});
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.page = 1;
				that.loadData();
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				let param = {
					searchs: JSON.stringify(that.searchs),
					screens: JSON.stringify(that.screen_data),
					page: that.page,
					prov: that.prov,
					city: that.city,
					type:that.select,
					keyword:that.keyword
				};
				that.Net._get('other/search', param, res => {
					if (res.code == 1) {
						//console.log(res);
						that.info = res.data.data;
						that.is_vip = res.data.is_vip;
						if(that.info.length == 0){
							that.empty_show = 1;
						}
					}
				});
			},
			clearRecords(){
				let that = this;
				console.log(that.screen_data)
				that.searchs.price_str = '';
				/* that.screen_data[1].value = '';
				that.screen_data[2].value = '';
				that.screen_data[3].value = '';
				that.screen_data[4].value = ''; */
				that.screen_data = [];
				that.searchs.brand_id = 0;
				that.pickerText = '地区';
				that.prov = '';
				that.city = '';
				that.area = '';
				that.pageinit();
			},
			closeRecordsIndex(e) {
				// console.log(that.screen_data[1])
				let that = this;
				let index = e.currentTarget.dataset.index;
				if (index == 0) {
					that.pickerText = '地区';
					that.searchs.brand_id = 0;
				} else if (index == 1) {
					that.searchs.price_str = '';
					that.screen_data[1].key = 0;
					that.screen_data[1].value = '';
				} else if (index == 2) {
					that.screen_data[2].key = 0;
					that.screen_data[2].value = '';
				} else if (index == 3) {
					that.screen_data[3].key = 0;
					that.screen_data[3].value = '';
				} else if (index == 4) {
					that.screen_data[4].key = 0;
					that.screen_data[4].value = '';
				}
				that.pageinit();
			},
			do_reset(key) {
				if (key == 'sort') {
					this.searchs.defaul_sort = '';
				} else if (key == 'single') {
					this.searchs.ctype_id = 0;
				} else if (key == 'salary') {
					this.searchs.price_str = 0;
				}
			},
			result(val) {
				let _res = JSON.parse(JSON.stringify(this.menuList));
				_res[val.f_index].defaultSelectedIndex = val.index;
				this.menuList = _res;
				// console.log('filter_result:' + JSON.stringify(val));
				let sort = val?.sort;
				let single = val?.single;
				let salary = val?.salary;
				let arr = [sort, single, salary];
				for (let x in arr) {
					if (arr[x] !== undefined) {
						switch (parseInt(x)) {
							case 0:
								this.searchs.defaul_sort = arr[x];
								break;
							case 1:
								this.searchs.ctype_id = arr[x];
								break;
							case 2:
								this.searchs.price_str = JSON.stringify(arr[x]);
								// console.log(this.searchs.price_str)
								break;
						}
						break;
					}
				}
				setTimeout(() => {
					this.pageinit();
				}, 100)
				//this.filterResult = JSON.stringify(val, null, 2)
			},
			result_2(val){
				console.log(111,val);
				this.pickerText = val.city;
				this.prov = val.prov;
				this.city = val.city;
				this.pageinit();
			},
			pageinit() {
				this.page = 1;
				this.list = [];
				this.load_type = 'more';
				this.empty_show = 0;
				this.loadData();
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				console.log(e)
				
			},
			onLongPress(e) {
			    // 在这里可以执行复制操作
			    uni.setClipboardData({
			        data: e,
			        success: () => {
						console.log('复制成功');
						// 可以弹窗提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
						},
			        fail: () => {
						console.log('复制失败');
			        }
			    });
			},
			collect(index){
				let that = this;
				let cid = that.info[index].id;
				that.Net._post('auth/team/collect', {id:cid,is_type:1}, res => {
					if (res.code == 1) {
						var msg = '收藏成功';
						if (res.data == 1){
							this.collect_s = 1;
							this.info[index].collect_s = 1;
						}else{
							this.collect_s = 0;
							this.info[index].collect_s = 0;
							msg = '取消成功';
						}
						that.Msg.Success(msg, res => {
							
						});
					}
				});
			},
			contact(phone){
				let that = this;
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				if (that.is_vip == 0){
					uni.showModal({
					    title: '此功能仅限会员使用，开通vip可无限次数联系',
					    content: '',
						confirmText:'去开通',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/personalcenter/member/member'
								});
								return '';
					        } else if (res.cancel) {
								
					        }
					    }
					})
					return '';
				}
				uni.showModal({
				    title: '联系车商',
				    content: phone,
					confirmText:'拨打',
				    success: function (res) {
				        if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
							that.Net._post('auth/team/call_num', {id:0}, res => {
								
							});
				        } else if (res.cancel) {
							
				        }
				    }
				})
			},
			openPreviewImage(e,index) {
				let that = this;
				let img_ = e;
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: img_,
					loop:true
				});
			},
			getAllUrl(away) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否一键下载',
					success: function(res) {
						if (res.confirm) {
							for (var z = 0; z < away.length; z++) {
								uni.downloadFile({
									url: away[z],
									success: (res) => {
										// 2 成功下载后而且状态码为200时将视频保存到本地系统
										if (res.statusCode === 200) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										}
									},
								})
							}
			
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			let param = {
				searchs: JSON.stringify(that.searchs),
				screens: JSON.stringify(that.screen_data),
				page: that.page,
				prov: that.prov,
				city: that.city,
				type:that.select,
				keyword:that.keyword
			};
			that.Net._get('other/search', param, res => {
				if (res.code == 1) {
					if (res.data.data == '') {
						uni.showToast({
							title: '没有更多内容了',
							duration: 2000,
							icon: 'none'
						});
						that.empty_show = 1;
					} else {
						that.info = that.info.concat(res.data.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	.goods_list .goods_img .imgColor{
		opacity: 0.5;
	}
	.goods_list .goods_img .type{
		position: absolute;
		left: 0;
		/* top: 0; */
		z-index: 99;
		height: 5vw;
		padding: 0 1vw;
		border-radius: 0 0 1vw 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.8vw;
		color: #fff;
		background-color: #FF6826;
	}
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: 100%;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		width: 50%;
		position: relative;
	}
	
	.nav .navauto .menu .text {
		font-size: 4.2vw;
		color: #666666;
		text-align: center;
		line-height: 13.5vw;
	}
	
	.nav .navauto .menu .line {
		width: 10%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 5%);
		bottom: 1vw;
		display: none;
	}
	
	.nav .navauto .menu .line image{
		width: 100%;
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.4vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.scroll_box {
		width: 100%;
		height: 86vh;
		margin-top: 4%;
	}
	
	.goods_list {
		width: 100%;
		display: flex;
		margin-top: 4%;
	}
	
	.goods_list .goods_img {
		width: 32vw;
		height: 25vw;
		margin-right: 3vw;
	}
	
	.goods_list .goods_img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.goods_list .goods_text {
		flex: 1;
	}
	
	.goods_list .goods_text .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.goods_list .goods_text .text {
		font-size: 3.5vw;
		color: #999999;
		margin-top: 2vw;
	}
	
	.goods_list .goods_text .money_box {
		margin-top: 1vw;
		display: flex;
		align-items: center;
	}
	
	.goods_list .goods_text .money_box .money {
		font-size: 4.5vw;
		font-weight: bold;
		color: #FF6826;
		flex: 1;
	}
	
	.goods_list .goods_text .money_box .rule {
		font-size: 3.1vw;
		color: #999999;
		/* flex: 1; */
		text-align: right;
	}
	
	.circle_list {
		width: 100%;
		background-color: #fff;
		padding: 4%;
		border-bottom: 1px solid #F7F8FC;
	}
	
	.circle_list .circle_box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.circle_list .circle_box .circle_img {
		width: 12vw;
		height: 12vw;
		margin-right: 2vw;
	}
	
	.circle_list .circle_box .circle_img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.circle_list .circle_box .circle_text {
		flex: 1;
	}
	
	.circle_list .circle_box .circle_text .name {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}
	
	.circle_list .circle_box .circle_text .text {
		font-size: 3.5vw;
		color: #999999;
		margin-top: 1vw;
	}
	
	.circle_list .circle_box .circle_text .text span {
		color: #FF6A23;
	}
	
	.circle_list .circle_box .orientation {
		font-size: 3.6vw;
		color: #999999;
	}
	
	.circle_list .circle_value {
		margin-top: 2vw;
		display: flex;
	}
	
	.circle_list .circle_value .type {
		width: 10vw;
		height: 5vw;
		font-size: 3vw;
		color: #fff;
		background-color: #FF5227;
		margin-right: 1vw;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.circle_list .circle_value .value {
		font-size: 3.7vw;
		color: #333;
		font-weight: bold;
	}
	
	.circle_list .circle_picture {
		width: 100%;
		margin-top: 2vw;
		display: flex;
	
	}
	
	.circle_list .circle_picture .picture {
		flex: 1;
		height: 30vw;
		margin-left: 1vw;
	}
	
	.circle_list .circle_picture .picture:nth-child(1) {
		margin-left: 0;
	}
	
	.circle_list .circle_picture .picture image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.circle_list .circle_picture .picture_2 {
		flex: 1;
		height: 30vw;
		margin-left: 1vw;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.circle_list .circle_picture .picture_2:nth-child(1) {
		margin-left: 0;
	}
	
	.circle_list .circle_picture .picture_2 image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
		opacity: 0.5;
	}
	
	.count {
		position: relative;
		top: -60%; /* Adjust this value based on the size of your images */
		left: 50%; /* Adjust this value based on the size of your images */
		color: white;
		font-size: 20px;
	}
	.circle_list .circle_other {
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}
	
	.circle_list .circle_other .time {
		font-size: 3.8vw;
		color: #999;
	}
	
	.circle_list .circle_other .icon_box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}
	
	.circle_list .circle_other .icon_box .icon {
		width: 16vw;
		display: flex;
		align-items: center;
	}
	
	.circle_list .circle_other .icon_box .icon .i {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
	}
	
	.circle_list .circle_other .icon_box .icon .t {
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
	
	.circle_other .icon_box .icon .c {
		font-size: 3.6vw;
		color: #FF9800;
		font-weight: bold;
	}
	.image {
	  width: 109px;
	  height: 109px;
	  margin: 3px;
	}
	
	.records_maxbox{
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
	}
	
	.records_maxbox .clear{
		margin: 0 3vw;
		font-size: 3.5vw;
		color: #666;
	}
	
	.records_box {
		flex: 1;
		padding: 2vw 3vw;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		background-color: #fff;
	}
	
	.records_box::after {
		flex: auto;
		content: '';
	}
	
	.records_box .records {
		padding: 1vw 2vw;
		display: flex;
		align-items: center;
		border: 1px solid #999;
		border-radius: 1vw;
		margin-right: 3vw;
		margin-bottom: 2vw;
	}
	
	.records_box .records .text {
		font-size: 3.2vw;
		color: #666;
		margin-right: 1vw;
	}
	
	.records_box .records .close {
		font-size: 3vw;
		color: #666;
	}
</style>
